<%- include header %>
<ol class="breadcrumb">
    <li><a href="/" title="Go Home">Home</a></li>
    <li>
        <a href="/content/category?categoryId=<%= doc.category %>&page=1"
           title="view by category"><%= doc.categoryName %></a>
    </li>
    <li><a href="/content/detail?id=<%= doc._id %>&view=contentDetail"><%= doc.name %>  detail</a></li>
    <li class="active">Edit <%= doc.name %></li>
</ol>

<form role="form" action="javascript:;">
    <div class="form-group">
        <label>Title</label>
        <span class="pull-right text-primary h4">you can input <i
                    class="h3 js-content-name-chars">100</i> charachters</span>
        <input type="text" class="form-control js-add-content-name" data-id="<%= doc._id %>" placeholder="Content Title"
               autofocus maxlength="100" data-name="<%= doc.name %>"
               value="<%= doc.name %>"/>
    </div>
    <div class="form-group">
        <label>Content</label>
        <%- include ../editor %>
        <div class="hide js-content-hide"><%- doc.content %></div>
    </div>
    <div class="form-group">
        <label>Category</label>
        <select class="form-control js-category-value l-select">
        </select>
    </div>
    <div class="form-group">
        <div class="l-padding-vertical">
            <button type="submit" class="btn btn-primary col-sm-12 js-save-content">Save Edit Content</button>
        </div>
    </div>
</form>


<%- include footer %>
<script>
    $(function () {
        $.get("/content/addPage", {
            type: "json"
        }, function (data) {
            var docs = data.docs;
            var options = "";
            $.each(docs, function (i, tempDoc) {
                if (tempDoc._id != '<%=doc.category%>') {
                    options += '<option class="l-option" value="' + tempDoc._id + '">' + tempDoc.name + '</option>';
                } else {
                    options += '<option class="l-option" value="' + tempDoc._id + '" selected>' + tempDoc.name + '</option>';
                }
            });
            $('.js-category-value').html(options);
        }, "json");
        $('.js-editor').html($('.js-content-hide').html());
    });

</script>
